import React from 'react'

import { SearchBar} from 'antd-mobile';
import '../../styles/home/search_x.css'
import { search_food } from '../../api'
class Search_x extends React.Component{
    state = {
        value: '',
        search_list:[]
      };
      componentDidMount() {
        this.autoFocusInst.focus();
        
      }
      searchto(){
        search_food(this.state.value)
        .then(res=>{
            // console.log(res.data)
            this.setState({
                search_list:res.data
            })
        })
      }
      onChange= (value) => {
        this.setState({ value });
      };
      clear = () => {
        this.setState({ value: '' });
      };
      handleClick = () => {
        this.manualFocusInst.focus();
      }
      goback(){
        this.props.history.goBack()
      }
      render() {
        let list_s
        if(this.state.search_list.message==="搜索餐馆数据失败"||this.state.search_list.length==0){
            console.log('康德')
            list_s=(
                <li>很抱歉！无搜索结果</li>
            )
        }else{
          console.log(this.state.search_list)
          let items=this.state.search_list
        
        list_s=items.map(val=>{
        let icons=val.supports.map((v)=>{
                return (
                    <span key={v.id}>
                       {v.icon_name}
                    </span>
                )
            })
            return (
                <li key={val.id}>
                    <img src={'//elm.cangdu.org/img/'+val.image_path} alt="失踪了"/>
                    <div>
                            <p>
                                <i>
                                    <span className="logo_1">品牌</span>
                                    <span className="name_1">{val.name}</span>
                                </i>

                                <b className="supot_1">
                                 {icons}
                                </b>
                            </p>
                            <p>
                                <span>
                                    月做{val.recent_order_num}单
                                </span>
                                <span className="right_1">
                                    {val.delivery_mode.text}
                                </span>
                            </p>
                            <p>
                                <i>
                                    <span>{val.float_minimum_order_amount}元起送</span>/
                                    <span>配送费约{val.float_delivery_fee}元</span>
                                </i>
                                <i className="right_1">
                                    <span>{val.distance}</span>/
                                    <span>{val.order_lead_time}</span>
                                </i>
                            </p>
                    </div>
                </li>
            )
        })
      }
        return (<div>
            <div className='search_head'>
                <i className="iconfont icon-fanhui-yuanshijituantubiao" onClick={this.goback.bind(this)}></i>
                <h3>搜索</h3>
            </div>
          <SearchBar
          ref={ref => this.autoFocusInst = ref}
            value={this.state.value}
            placeholder="搜索饿了么商家、商品名称"
            // onSubmit={value => console.log(value, 'onSubmit')}
            onSubmit={this.searchto.bind(this)}
            showCancelButton
            onChange={this.onChange}
          /> 
          <ul className='list_to'>
            {list_s}
          </ul>
        </div>);
      }
}
export default Search_x